<template>
  <div class="level">
    <top :test="''"></top>
    <input id="foo" :value="shareLinkUrl" style="border:none;outline: none;color:#5b29cc;font-size:20px;margin-top:0px;width: 100%;position: fixed;"
      readonly>
    <div class="levelTitle">
      <span :class="{active:isTrue}" @click="isTrue=true" style="margin-left: -10px;">13级奖励机制</span>
      <span style="margin-left: 15px;" :class="{active:!isTrue}" @click="isTrue=false">好友推荐</span>
      <img src="../../assets/shareIcons.png" alt="" width="15" style="    position: absolute; top: 15px; right: 10px;" @click="setShareTips">
    </div>
    <div style="height: 20px;;"></div>
    <div class="bg" v-if="isTrue">
      <div style="padding: 0px 10px;">
        <img src="../../assets/hy_banner2@2x.png" alt="" width="100%" style="margin-top: 300px;">
        <img src="../../assets/shareTitle1@2x.png" alt="" width="100%" style="margin: 30px 0px">
        <img src="../../assets/hy_bg@2x.png" alt="" width="100%">
        <div style="text-align: center;margin: 30px 0px;">
          <img src="../../assets/shareTitle2@3x.png" alt="" width="50%">
        </div>
        <div style="padding: 0px 30px;margin-bottom: 50px;" class="box">
          <div>
            1、邀请好友需为未注册马六甲基金的用户;
          </div>
          <div>
            2、被邀人成功投资后邀请人可获得邀请奖励;
          </div>
          <div>
            3、被邀人6个月内复投还可享受奖励，复投按照首投奖励标准50%发放;
          </div>
          <div>
            4、邀请奖励当日到账，提现金额50元起;
          </div>
          <div>
            5、最终活动解释权归平台所有
          </div>
        </div>
      </div>
    </div>
    <div class="bg" v-if="!isTrue">
      <div style="padding-top: 250px;">
        <div style="text-align: center">
          <img src="../../assets/awardTitle3@2x.png" alt="" height="45">
        </div>
        <div>
          <div class="recommendText">
            <div style="position: relative;height: 60px;">
              <span class="sign">1</span>
              <span style="position: absolute;">推荐人需要自己先注册马六甲比特币基金账号,成为平台用户;</span>
            </div>
            <div style="position: relative;height: 40px;">
              <span class="sign">2</span>
              <span style="position: absolute;">将复制链接复制给好友进行注册;</span>
            </div>
            <div style="position: relative;height: 40px;">
              <span class="sign">3</span>
              <span style="position: absolute;">好友首次投资后,推荐人即可获得邀请奖励;</span>
            </div>
            <div style="position: relative;height: 40px;">
              <span class="sign">4</span>
              <span style="position: absolute;">邀请奖励可以在用户中心以及好友推荐中进行查看,在余额进行提现;</span>
            </div>
          </div>
        </div>
        <div style="text-align: center;margin-top: 50px;">
          <img src="../../assets/shareTitle4@2x.png" alt="" height="45">
        </div>
        <div class="recommendText">
          <div style="position: relative;height: 40px;">
            <span class="sign">1</span>
            <span style="position: absolute;">所邀好友进行产品投资才可获得邀请奖励;</span>
          </div>
          <div style="position: relative;height: 40px;">
            <span class="sign">2</span>
            <span style="position: absolute;">隔级好友最高至13级;</span>
          </div>
          <div style="position: relative;height: 40px;">
            <span class="sign">3</span>
            <span style="position: absolute;">奖励当日可进行查看，并发放至余额;</span>
          </div>
          <div style="position: relative;height: 40px;">
            <span class="sign">4</span>
            <span style="position: absolute;">邀请奖励满50元可以提现;</span>
          </div>
          <div style="position: relative;height: 60px;">
            <span class="sign">5</span>
            <span style="position: absolute;">被邀人6个月内的复投还可享受奖励,复投按照首投奖励50%发放;</span>
          </div>
          <div style="position: relative;height: 40px;">
            <span class="sign">6</span>
            <span style="position: absolute;">最终解释权归马六甲比特币基金平台所有;</span>
          </div>
        </div>
        <div style="text-align: center;padding:0px 10px;">
          <img src="../../assets/shareTitle5@2x.png" alt="" width="80%">
          <img src="../../assets/hy_pit@2x.png" alt="" width="100%" style="margin-top: 20px;">
        </div>
      </div>
    </div>

    <!-- 分享弹框 -->
    <div class="shareTips" v-show="showTips">
      <div class="shareBox">
        <div style="height: 115px;padding: 10px;">
          <span style="font-size: 14px;">分享给好友</span>
          <div style="display: flex;font-size: 14px;">
            <div style="width: 33%;height: 100px;text-align: center;position: relative;" class="copySty">
              <img src="../../assets/hy_icon6@2x.png" alt="" width="30" style="margin-top:15px;">
              <div class="levelSty">
                <copy :show="true" :value="11" :text="''" :id="'#foo'"></copy>
                <copy :show="true" :value="11" :text="'复制链接'" :id="'#foo'" :height="80" :top="-50" :size="12"></copy>
              </div>
            </div>
            <div class="cancelBtn" @click="showTips=false">
              取消
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Top from '../../components/common/top.vue'
  import Copy from '../../components/common/copy.vue'
  import util from '../../service/util.js'
  export default {
    components: {
      Top,
      Copy
    },
    data() {
      return {
        isTrue: true,
        showTips: false,
        username: "",
        shareLinkUrl: ""
      }
    },
    mounted() {
      this.username = this.$route.query.username || util.getItem('login.username');
      this.shareLinkUrl = "http://app.bit000.com/#/login?username=" + this.username;
      if (this.$route.query.username) {
        this.showTips = false;
      }
    },
    methods: {
      setShareTips() {
        if (this.$route.query.username) {
          return false;
        }
        this.showTips = true;
      }
    }
  }

</script>
<style lang="less" scoped>
  .levelTitle {
    z-index: 99999;
    position: fixed;
    text-align: center;
    height: 45px;
    line-height: 45px;
    width: 90%;
    font-size: 17px;
    margin-left: 8%;
  }

  .active {
    color: #fea620;
  }

  .bg {
    background: url('../../assets/shareBannerBg.png');
    height: 650px;
    width: 100%;
    background-size: 100% 100%;
  }

  .sign {
    width: 20px;
    background: #369af0;
    color: #fff;
    display: inline-block;
    text-align: center;
    font-size: 12px;
    border-radius: 50%;
    margin-right: 8px;
  }

  .recommendText {
    padding: 0px 15px;
    font-size: 14px;
    margin-top: 10px;
  }

  .shareTips {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
  }

  .cancelBtn {
    width: 100%;
    background: #fff;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-top: 1px solid #efefef;
    position: fixed;
    bottom: 0px;
  }

  .shareBox {
    position: absolute;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 170px;
    background: #fff;
    transition: all 1s;
  }

  .copy {
    height: 73px;
    line-height: 115px;
    margin-top: -49px;
    z-index: 99999;
  }

  .levelSty .copyBox {
    position: absolute;
    height: 50px;
    width: 100%;
    top: 50px;
    display: block;
  }
</style>